<template>
  <transition name="slider">
    <music-list :songs="songs" :title="title" :bg-image="bgImage"></music-list>
  </transition>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {getSingerDetail} from "api/singer";
  import {createdSong} from "common/js/song";
  import {ERR_OK} from "api/config";
  import MusicList from '@/components/music-list/music-list'

  export default {
        name: "singer-detail",
      data() {
            return {
              songs: []
            }
      },
      computed: {
          title() {
            return this.singer.name
          },
          bgImage() {
            return this.singer.avatar
          },
          // 挂载一个singer属性 在getter中获取数据
        ...mapGetters([
          'singer'
        ])
      },
      created() {
          this._getDetail();
      },
      methods: {
          _getDetail() {
            if (!this.singer.id) {
              this.$router.push('/singer')
            }
            getSingerDetail(this.singer.id).then((res) => {
              if (res.code === ERR_OK) {
                this.songs = this._nomalizeSongs(res.data.list)
                console.log(this.songs)
              }
            })
          },
        _nomalizeSongs(list) {
            let ret = [];
            list.forEach((item,index) => {
              // 结构对象赋值
              let {musicData} = item;
              if (musicData.songid && musicData.albummid) {
                ret.push(createdSong(musicData))
              }
            })
          return ret
        }
      },
    components: {
      MusicList
    }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  /*.singer-detail
    position: fixed
    z-index 100
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: $color-background*/
  .slider-enter-active, .slider-leave-active
    transition: all 0.3s
  .slider-enter, .slider-leave-to
    transform: translate3d(100%, 0, 0)
</style>
